<template>
  <div class="app-container">
    <div class="filter-container">
        <div style="margin:10px;">
          <label ><p>项目标题：{{temp.title}}</p></label>
        </div>
       <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px"  >
        <el-form-item label="用户编号" prop="uid" >
          <el-input v-model="temp.uid" disabled />
        </el-form-item>
        <el-form-item label="类型" prop="level" >
          <el-select v-model="temp.level" class="filter-item" placeholder="用户类型">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
      
        <el-form-item label="昵称" prop="nickanem" >
          <el-input v-model="temp.nickname" />
        </el-form-item>
         <el-form-item label="手机号" prop="phone" >
                  <el-input v-model="temp.phone" />
        </el-form-item>
         <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model="temp.idCard" />
        </el-form-item>
        <el-form-item label="手机号是否认证" prop="phoneAttestation">
            <el-radio  name="phoneAttestation"  v-model="temp.phoneAttestation" label="0" size="large">否</el-radio>
            <el-radio name="phoneAttestation"  v-model="temp.phoneAttestation" label="1" size="large">是</el-radio>
        </el-form-item>
         <el-form-item label="身份证是否认证" prop="idAttestation">
            <el-radio name="idAttestation" v-model="temp.idAttestation" label="0" size="large">否</el-radio>
            <el-radio name="idAttestation"  v-model="temp.idAttestation" label="1" size="large">是</el-radio>
        </el-form-item>
    
        <el-form-item label="是否是商家账户" prop="isStore">
             <el-radio name="isStore" v-model="temp.isStore" label="0" size="large">否</el-radio>
            <el-radio name="isStore" v-model="temp.isStore" label="1" size="large" @click="isStore">是</el-radio>
        </el-form-item>
         <el-form-item label="所属项目" prop="projectPid"  v-if="temp.isStore ==1">
            <el-select v-model="temp.projectPid" filterable placeholder="Select">
              <el-option
                v-for="item in project"
                :key="item.pid"
                :label="item.title"
                :value="item.pid"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="商家权限类别" prop="jurisdiction" v-if="temp.isStore ==1">
            <el-radio name="jurisdiction" v-model="temp.jurisdiction" label="1" size="large">老板</el-radio>
            <el-radio name="jurisdiction" v-model="temp.jurisdiction" label="2" size="large">经理</el-radio>
            <el-radio name="jurisdiction" v-model="temp.jurisdiction" label="3" size="large">员工</el-radio>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
       
        <el-button type="primary" @click="updateData()">
          提交
        </el-button>
      </div>
  </div>
  </div>
</template>

<script>

import { GQL } from '@/api/article'

const calendarTypeOptions = [
  { key: '0', display_name: '普通用户' },
  { key: '1', display_name: '家人用户' }
]
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
export default {
  data() {
    return {
      type:'',
      uid:'',
     calendarTypeOptions,
       temp: {
        uid:'',
        nickname: '',
        phone: '',
        level: '',
        idCard:'',
        idTime:'',
        idLssue:'',
        phoneAttestation:'',
        idAttestation:'',
        phoneLssue:'',
        balance:"",
        username:'',
        jurisdiction:'',
        isStore:'',
        projectPid:''
      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      jurisdiction:false,
      project:[],
   
     
    }
  },
  created() {
    let id=this.$route.query.id;
   
    this.uid = id
    this.userInfo()
  },
  methods: {
    //获取项目信息
    userInfo(){
         const query = {
           "operationName": "allSlUsers",
            "query": "query allSlUsers($filter: SlUserFilter,$offset: Int,$first: Int,$orderBy: [SlUsersOrderBy!] = [PRIMARY_KEY_ASC]) { allSlUsers( filter: $filter first:$first offset:$offset orderBy:$orderBy) { nodes { avatarUrl balance country level createTime province uid city nickname phone openid phoneAttestation idAttestation isStore jurisdiction idCard projectPid } totalCount } }",
            "variables":{"filter": {"uid": {"equalTo": this.uid}}}
        }
       GQL(query).then(response => {
        //  console.log('111111111111111111111',response.data.allSlUsers.nodes[0])
          this.temp = response.data.allSlUsers.nodes[0]
        })

        const query1 = {
           "operationName": "allSlProjects",
            "query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter:$filter) { nodes { title pid } } }",
            "variables":{ "filter": { "isDelete": { "equalTo": "0"}, "status": { "equalTo": "1" } } }
        }
       GQL(query1).then(response1 => {
         console.log('111111111111111111111',response1)
          this.project = response1.data.allSlProjects.nodes
        })
    },
    isStore(){
        this.temp.isStore = 1
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          let query = {
            "operationName": "updateSlUser",
            "query": "mutation updateSlUser($input: UpdateSlUserByUidInput!) { updateSlUserByUid(input: $input) { slUser { uid nickname } } }",
            "variables": {input: {uid: this.uid, slUserPatch:tempData}}
          }
          GQL(query).then((res) => {
              console.log('111',res)
               if(res.errors){
                  this.$notify({
                    title: '修改失败',
                    message: '修改项目失败',
                    type: 'error',
                    duration: 2000
                  })
              }else{
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '修改成功',
                    message: '修改项目成功',
                    type: 'success',
                    duration: 2000
                  })
                  
              }
       
          })
        }
      })
    },
  }
}
</script>

